<template>
  <el-dialog v-model="visible" title="查看图片" width="800" :append-to-body="true" @close="close">
    <div>
      <el-carousel ref="carouselRef" height="450px" :autoplay="false" arrow="always"
        @change="changeCarousel" v-if="imageList.length">
        <el-carousel-item v-for="item in imageList" :key="item">
          <div style="height: 500px;" class="">
            <div style="width: 550px; height: 412px;margin: 0 auto;"
              class="border border-2 flex justify-center items-center">
              <el-image style="width: 435px; height: 399px;" :src="item.path"></el-image>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div v-else>
        <el-empty description="暂无图片" />
      </div>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
        <el-button type="danger" @click="hangleDelete" v-if="imageList.length">删除</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="DialogImage">
import { reactive, ref, toRefs } from 'vue'
import { getImage, deleteImage } from '@/api/public';
import { ElMessage } from 'element-plus';

const visible = ref(false)

const imageList = ref([])

const open = (type, id) => {
  visible.value = true
  getImageDetail(type, id)
}

const getImageDetail = async (type, id) => {
  try {
    const res = await getImage({
      type,
      detail_id: id,
    })
    imageList.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const carouselRef = ref()
const currentIndex = ref(0)
const changeCarousel = (val) => {
  currentIndex.value = val
}
const hangleDelete = async () => {
  try {
    const id = imageList.value[currentIndex.value].id
    const res = await deleteImage({ id })
    ElMessage.success('删除成功')
    imageList.value.splice(currentIndex.value, 1)
  } catch (e) {
    throw Error(e)
  }
}

const close = () => {
  imageList.value = []
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-carousel__arrow){
    background-color: var(--el-carousel-arrow-hover-background)!important;
}
</style>